<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta name="format-detection" content="telephone=no" />
	<meta name="renderer" content="webkit">
	<title>Notice</title>
	<link rel="stylesheet" href="css/doc.css">
    <!-- <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" /> -->
    <!-- <script src="https://www.layuicdn.com/layui/layui.js"></script> -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->

    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/layui/layui.js"></script>
    <style>
.site-title{ margin: 30px 0 20px;}
.site-title fieldset{border: none; padding: 0; border-top: 1px solid #eee;}
.site-title fieldset legend{margin-left: 20px;  padding: 0 10px; font-size: 22px; font-weight: 300;}
.layui-btn-primary {background:#fff;}

.demo-rb {display: inline-block;background:#fff;border:1px solid #e8e8e8;border-radius:5px;padding:20px;box-shadow:0 1px 5px rgba(0,0,0,.08);}
.demo-rb + em {right:2px !important;top:5px !important;}
.demo-rb + em svg path {fill:#333;}
	</style>
}
	
}
</head>
<body>
<div class="doc-layout">
	<div class="doc-side">
		<h1>Notice</h1>
		<h2>文档目录</h2>
		<ul>
			<li><a href="#use" title="使用方法">使用方法</a></li>
			<li><a href="#demo" title="演示">演示</a></li>
			<li><a href="#param" title="可配置参数">可配置参数</a></li>
			<li><a href="#custom" title="多种用法">多种用法</a></li>
		</ul>
		<h2>AUTHOR</h2>
		<ul>
			<li><a href="" target="_blank">@cm</a></li>
		</ul>
	</div>
	<div class="doc-content" id="doc-content">
		<div class="layui-main">
			<h1 class="doc-h1">Notice 通知提醒</h1>


			<div class="site-title">
			  <fieldset><legend><a name="before">示例</a></legend></fieldset>
			</div>
			<div>
				<button class="layui-btn layui-btn-normal" id="open1-1">消息</button>
				<button class="layui-btn" id="open1-2">成功</button>
				<button class="layui-btn layui-btn-warm" id="open1-3">警告</button>
				<button class="layui-btn layui-btn-danger" id="open1-4">错误</button>
				<button class="layui-btn layui-btn-primary" id="open1-5">显示加载中...</button>
			</div>

			<br>
			<div class="site-title">
			  <fieldset><legend><a name="before">显示位置</a></legend></fieldset>
			</div>
			<div>
				<button class="layui-btn layui-btn-sm layui-btn-primary" id="open2-1">显示在左侧</button>
				<button class="layui-btn layui-btn-sm layui-btn-primary" id="open2-2">显示在中间</button>
				<button class="layui-btn layui-btn-sm layui-btn-primary" id="open2-3">显示在右侧</button>
				<button class="layui-btn layui-btn-sm layui-btn-primary" id="open2-4">垂直居中显示</button>
				<button class="layui-btn layui-btn-sm layui-btn-primary" id="open2-5">右下角显示</button>
				<button class="layui-btn layui-btn-sm layui-btn-primary" id="open2-6">右下角自定义内容</button>
			</div>
			
			<br>
			<div class="site-title">
			  <fieldset><legend><a name="before">带关闭功能</a></legend></fieldset>
			</div>
			<div>
				<button class="layui-btn layui-btn-sm layui-btn-primary" id="open3-1">显示一个可关闭的提示</button>
				<button class="layui-btn layui-btn-sm layui-btn-primary" id="open3-2">关闭后带回调内容</button>
				<button class="layui-btn layui-btn-sm layui-btn-primary" id="open3-3">不自动关闭，需手动点击</button>
			</div>

			<div class="site-title">
			  <fieldset><legend><a name="before">指定容器内显示</a></legend></fieldset>
			</div>
			<div class="box" style="width: 800px;background:#333;position:relative;padding:100px 50px;">
				<button class="layui-btn layui-btn-sm layui-btn-primary" id="open5-1">容器内垂直居中显示</button>
				<button class="layui-btn layui-btn-sm layui-btn-primary" id="open5-2">容器内显示</button>
				<pre class="layui-code" lay-encode="true">
					fcMessage.info('在指定容器内显示',{
					   target:".box",
					})
				</pre>
			</div>



			<fieldset class="layui-elem-field layui-field-title" id="use"><legend>使用方法</legend></fieldset>
			<pre class="layui-code" lay-encode="true">
				// layui 配置插件目录
				layui.config({
				   base: 'js/lay-module/',
				}).extend({
				   fcMessage:'fcMessage/fcMessage',
				})

				调用
				fcMessage.info('这是一条提示信息！',{
				   duration:2000,
				   showClose:true,
				   position:"left",
				   onClose:function(){
				      console.log('提示信息关闭后回调')
				   }
				})
			</pre>

			<br><br>

			<fieldset class="layui-elem-field layui-field-title" ><legend>API</legend></fieldset>
			<table class="layui-table" lay-skin="line">
				<thead>
					<tr>
						<td>参数</td>
						<td>说明</td>
						<td>类型</td>
						<td>默认值</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>duration</td>
						<td>显示时间, 毫秒。设为 0 则不会自动关闭</td>
						<td>Number</td>
						<td>2000</td>
					</tr>
					<tr>
						<td>showClose</td>
						<td>是否显示关闭按钮</td>
						<td>Boolean</td>
						<td>true</td>
					</tr>
					<tr>
						<td>position</td>
						<td>显示位置，可选值为 left | right | center</td>
						<td>String</td>
						<td>center</td>
					</tr>
					<tr>
						<td>target</td>
						<td>在指定容器内显示</td>
						<td>String</td>
						<td>body</td>
					</tr>
					<tr>
						<td>onClose</td>
						<td>结束回调</td>
						<td>Function</td>
						<td>-</td>
					</tr>
					<tr>
						<td>cancel</td>
						<td>关闭回调，适用与loading，手动关闭 fcMessage.close()</td>
						<td>Function</td>
						<td>-</td>
					</tr>
				</tbody>				
			</table>
			<br><br>



			<div class="site-title">
			  <fieldset><legend><a name="before">另一版本，普通插件形式调用</a></legend></fieldset>
			</div>
			<div>
				<pre class="layui-code" lay-encode="true">
					不依赖layui，需jquery支持
				<script src="js/lay-module/fcMessage/fc.message.js"></script>
				</pre>
				<button class="layui-btn layui-btn-normal" onclick="message.info('普通消息提示',{duration:1000,offset:'c',})">消息</button>
				<button class="layui-btn" onclick="message.success('成功消息提示',{offset:'c',closeBtn:true})">成功</button>
				<button class="layui-btn layui-btn-warm" onclick="message.warning('警告消息提示')">警告</button>
				<button class="layui-btn layui-btn-danger" onclick="message.error('错位消息提示',{closeBtn:true,onClose:function(){alert('error')}})">错误</button>
				<button class="layui-btn layui-btn-primary" id="open7">loading</button>
			</div>


				
		</div>
	</div>
</div>

<script>

// layui 配置
layui.config({
	base: 'js/lay-module/', 		//当前js目录
}).extend({
	fcMessage:'fcMessage/fcMessage2',
})

layui.use(['jquery','layer','code','fcMessage'],function(){
	var $ = layui.$,
		layer = layui.layer,
		fcMessage = layui.fcMessage;

	layui.code({
		encode: true
		// ,skin: 'notepad'
	});

	$('#open1-1').click(function(){
		fcMessage.info('这是一条提示信息！')
	});

	$('#open1-2').click(function(){
		fcMessage.success('这是一条提示信息！',{
			// showClose:true,
			onClose:function(){
				console.log('自动关闭！')
			},
		})
	});

	$('#open1-3').click(function(){
		fcMessage.warning('这是一条提示信息！',{
				onClose:function(){
					console.log('end')
				}

			}
		)
	})

	$('#open1-4').click(function(){
		fcMessage.error('这是一条提示信息！')
	});

	$('#open1-5').click(function(){
		fcMessage.loading('正在加载中...',{
			showClose:false,
			cancel:function() {
				setTimeout(function(){
					fcMessage.close('loading');
					fcMessage.info('保存成功！')
				},2000)
			}
		})
	});

	// 显示在左侧
	$('#open2-1').click(function(){
		fcMessage.info('我显示在左侧',{
			position:'left'
		})
	})
	// 显示在中间
	$('#open2-2').click(function(){
		fcMessage.info('我显示在中间,默认就是这样')
	})
	// 显示在右侧
	$('#open2-3').click(function(){
		fcMessage.info('我显示在右侧',{
			duration:0,
			position:'right'
		})
	})
	// 垂直居中显示
	$('#open2-4').click(function(){
		fcMessage.info('现在，我是垂直居中显示',{
			offset:'c'
		})
	})

	// 右下角显示
	var text = 0;
	$('#open2-5').click(function(){
		text++;
		fcMessage.info('现在，我是右下角显示'+text,{
			duration:0,
			position:'right',
			offset:'rb',
			showClose:true,
		})
	})

	// 右下角显示自定义内容
	var text = 0;
	$('#open2-6').click(function(){
		text++;
		fcMessage.custom('<div class="demo-rb">现在，我是右下角显示'+text+'</div>',{
			duration:0,
			position:'right',
			offset:'rb',
			showClose:true,
		})
	})



	$('#open3-1').click(function(){
		fcMessage.info('现在，我是垂直居中显示',{
			showClose:true
		})
	})

	$('#open3-2').click(function(){
		fcMessage.info('自动关闭和手动点击关闭<Br>都会执行onClose中的内容',{
			showClose:true,
			onClose:function(){
				layer.msg('关闭后的回调内容')
				console.log('自动关闭和手动点击关闭<Br>都会执行onClose中的内容')
			}
		})
	})

	$('#open3-3').click(function(){
		fcMessage.info('duration:0 不会自动关闭',{
			showClose:true,
			duration:0,
			onClose:function(){
				layer.msg('关闭后的回调内容')
			}
		})
	})



	$('#open5-1').click(function(){
		fcMessage.info('在指定容器内显示',{
			target:".box",
			offset:'c'
		})
	});
	$('#open5-2').click(function(){
		fcMessage.info('在指定容器内显示',{
			target:".box",
		})
	});



	$('#open7').click(function(){
		message.loading('正在加载中...',{
			cancel:function() {
				setTimeout(function(){
					message.close();
					layer.msg('loading后主动关闭')
				},3000)
			}
		})
	});	




});

</script>
</body>
</html>